<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      
    </view>

    <!-- 中间部分 -->
    <view class="content">
      <view class="welcome-text">欢迎注册垃圾分类环保志愿者</view>
      <button type="primary" @click="handleGetLink">点击获取链接注册</button>
      
      <view class="qr-code-invite">
        二维码邀请注册
        <image :src="qrCodeUrl" mode="widthFix"></image>
      </view>
    </view>

  <!--  底部垃圾桶图标区域
    <view class="footer">
      <view class="trash-bin yellow">
        <image src="/static/trash-yellow.png" mode="widthFix"></image>
      </view>
      <view class="trash-bin blue">
        <image src="/static/trash-blue.png" mode="widthFix"></image>
      </view>
      <view class="trash-bin red">
        <image src="/static/trash-red.png" mode="widthFix"></image>
      </view>
      <view class="trash-bin green">
        <image src="/static/trash-green.png" mode="widthFix"></image>
      </view>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      qrCodeUrl: '/static/qr-code.png' // 假设二维码图片存放在/static目录下
    };
  },
  methods: {
    handleGetLink() {
      // 这里可以处理获取链接的逻辑
      console.log('点击了获取链接');
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #f8f8f8;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.content {
  margin-top: 50px; /* 头部固定高度 */
  padding: 20px;
  text-align: center;
}

.welcome-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 30px;
}

.qr-code-invite {
  margin-top: 40px;
  text-align: center;
}

.footer {
  display: flex;
  justify-content: space-around;
  width: 80%;
  margin-top: 60px;
}

.trash-bin {
  width: 25%;
}

.yellow,
.blue,
.red,
.green {
  width: 70px;
  height: 70px;
}
</style>
